<template>
	<view class="content">
		<view class="menuBox">
			<view class="menuItem" :class="menuIndex==1?'menuActive':''" @click="changeMenu(1)">我的团队</view>
			<view class="line"></view>
			<view class="menuItem" :class="menuIndex==2?'menuActive':''" @click="changeMenu(2)">我的佣金</view>
		</view>
		<view class="myTeamBox" v-if="menuIndex==1">
			<view class="userBox">
				<image :src="baseUrl+'success.png'" class="avatar" />
				<view class="levelBox">
					<text class="label">我的身份：</text>
					<text class="levelInfo">{{team.grade}}</text>
				</view>
				<view class="moneyBox">
					<text class="label">团队佣金：</text>
					<text class="moneyInfo">￥{{team.team_commission}}</text>
				</view>
			</view>
			<view class="line1">
			</view>
			<view class="itemBox">
				<view class="itemHead itemHead1">
					<text class="name">二级渠道商（{{team.second_agent_count}}人）</text>
					<image :src="baseUrl+'arrow.png'" class="arrow" />
				</view>
				<view class="itemList" v-for="(item,index) in team.second_agent" :key="index">
					<view class="dot1"></view>
					<text class="itemListName">{{item.nickname}}</text>
				</view>
			</view>
			<view class="itemBox">
				<view class="itemHead itemHead2">
					<text class="name">三级渠道商（{{team.three_agent_count}}人）</text>
					<image :src="baseUrl+'arrow.png'" class="arrow" />
				</view>
				<view class="itemList" v-for="(item,index) in team.three_agent" :key="index">
					<view class="dot2"></view>
					<text class="itemListName">{{item.nickname}}</text>
				</view>
			</view>
			<view class="itemBox">
				<view class="itemHead itemHead3">
					<text class="name">分销商（{{team.distribution_count}}人）</text>
					<image :src="baseUrl+'arrow.png'" class="arrow" />
				</view>
				<view class="itemList" v-for="(item,index) in team.distribution" :key="index">
					<view class="dot3"></view>
					<text class="itemListName">{{item.nickname}}</text>
				</view>
			</view>
		</view>
		<!-- 我的佣金 -->
		<view class="myCommission" v-else>
			<view class="myCommission1">
				<text class="label">待提现佣金</text>
				<text class="waitExtract">15464</text>
				<view class="extractBtn">
					提现
				</view>
				<view class="line2">
				</view>
				<view class="myCommissionBottom">
					<view class="bottomBox bottomBoxLeft">
						<text class="label">已收入佣金(元）</text>
						<text class="money">1456456456</text>
					</view>
					<view class="bottomBox bottomBoxRight">
						<text class="label">待提现(元）</text>
						<text class="money">1456456456</text>
					</view>
				</view>
			</view>
			<view class="myCommission2">
				<view class="titleBox">
					<view class="titleLine"></view>
					<text class="title">渠道收入佣金</text>
				</view>
				<view class="line3">
				</view>
				<view class="myCommission2Bottom">
					<view class="bottomBox">
						<text class="label">已收入(元）</text>
						<text class="money">1456456456</text>
					</view>
					<view class="line4">
					</view>
					<view class="bottomBox">
						<text class="label">待提现(元）</text>
						<text class="money">1456456456</text>
					</view>
				</view>
			</view>
			<view class="myCommission2">
				<view class="titleBox">
					<view class="titleLine"></view>
					<text class="title">分销收入佣金</text>
				</view>
				<view class="line3">
				</view>
				<view class="myCommission2Bottom">
					<view class="bottomBox">
						<text class="label">已收入(元）</text>
						<text class="money">1456456456</text>
					</view>
					<view class="line4">
					</view>
					<view class="bottomBox">
						<text class="label">待提现(元）</text>
						<text class="money">1456456456</text>
					</view>
				</view>
				<view class="line5">
				</view>
				<view class="myCommission2Bottom">
					<view class="bottomBox">
						<text class="label">已完成订单(笔）</text>
						<text class="money">1456456456</text>
					</view>
					<view class="line4">
					</view>
					<view class="bottomBox">
						<text class="label">进行中订单(笔）</text>
						<text class="money">1456456456</text>
					</view>
				</view>
			</view>
			<!-- 佣金明细 -->
			<view class="commissionListBox">
				<view class="titleBox">
					<view class="titleLine"></view>
					<text class="title">佣金明细</text>
				</view>
				<view class="line3">
				</view>
				<view class="commissionListItem">
					<text class="from">二级渠道返佣</text>
					<text class="num">+100</text>
					<text class="time">2024-06-02 17:45:08</text>
				</view>
				<view class="commissionListItem">
					<text class="from">二级渠道返佣</text>
					<text class="num">+100</text>
					<text class="time">2024-06-02 17:45:08</text>
				</view>
				<view class="commissionListItem">
					<text class="from">二级渠道返佣</text>
					<text class="num">+100</text>
					<text class="time">2024-06-02 17:45:08</text>
				</view>
				<view class="commissionListItem">
					<text class="from">二级渠道返佣</text>
					<text class="num">+100</text>
					<text class="time">2024-06-02 17:45:08</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
				menuIndex: 1,
				content: '',
				team:''
			}
		},
		methods: {
			changeMenu(num) {
				this.menuIndex = num;
			}
		},
		computed: {},
		onLoad() {
			// 我的团队
			this.$request.get(`shopapi/agent/agent_data`).then(res => {
				this.team=res.data.data;
			})
		},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.commissionListBox {
		width: 670rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		padding: 30rpx 40rpx 40rpx 40rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 100rpx;

		.commissionListItem {
			width: 600rpx;
			height: 120rpx;
			border-bottom: #a0a0a0;
			position: relative;
			margin-top: 50rpx;

			.form {
				font-size: 27rpx;
				font-family: 'ar';
			}

			.time {
				position: absolute;
				top: 52rpx;
				font-size: 23rpx;
				font-family: 'ar';
				color: #8e8e8e;
				left: 0;
			}

			.num {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 30rpx;
				font-family: 'ar';
				color: #f08329;
			}
		}
	}

	.line3 {
		width: 565rpx;
		height: 1rpx;
		background-color: #000;
		margin-top: 30rpx;
		margin-left: 35rpx;
	}

	.titleBox {
		display: flex;
		align-items: center;

		.titleLine {
			height: 25rpx;
			width: 5rpx;
			background-color: #f08329;
		}

		.title {
			font-size: 25rpx;
			font-family: 'am';
			margin-left: 30rpx;
		}
	}

	.myCommission2 {
		width: 670rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		padding: 30rpx 40rpx 40rpx 40rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		background-color: #fff;
		border-radius: 15rpx;

		.line5 {
			width: 565rpx;
			border-bottom: 1rpx dotted #a0a0a0;
			margin-top: 30rpx;
			margin-left: 35rpx;
		}

		.myCommission2Bottom {
			width: 600rpx;
			height: 156rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.line4 {
				width: 2rpx;
				height: 100rpx;
				background-color: #8e8e8e;
			}

			.bottomBox {
				width: 285rpx;
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 15rpx;

				.label {
					width: 100%;
					text-align: center;
					font-size: 23rpx;
					font-family: 'ar';
					display: block;
					color: #8e8e8e;
				}

				.money {
					width: 100%;
					text-align: center;
					font-size: 34rpx;
					font-family: 'ab';
					display: block;
				}
			}

		}




	}

	.myCommission1 {
		width: 670rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		padding: 60rpx 40rpx 40rpx 40rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		background-color: #fff;
		border-radius: 15rpx;

		.myCommissionBottom {
			width: 600rpx;
			height: 156rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.bottomBoxLeft {
				background-color: #fce8d7;
			}

			.bottomBoxRight {
				background-color: #d0e7f5;
			}

			.bottomBox {
				width: 285rpx;
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 15rpx;

				.label {
					width: 100%;
					text-align: center;
					font-size: 23rpx;
					font-family: 'ar';
					display: block;
				}

				.money {
					width: 100%;
					text-align: center;
					font-size: 34rpx;
					font-family: 'ab';
					display: block;
				}
			}

		}

		.line2 {
			width: 600rpx;
			height: 1rpx;
			background-color: #000;
			margin-top: 45rpx;
		}

		.extractBtn {
			width: 340rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #f08329;
			text-align: center;
			font-size: 28rpx;
			font-family: 'am';
			margin-top: 50rpx;
			margin-left: 130rpx;
			border-radius: 45rpx;
			color: #fff;
		}

		.waitExtract {
			width: 100%;
			text-align: center;
			font-size: 48rpx;
			font-family: 'ab';
			display: block;
			margin-top: 25rpx;
		}

		.label {
			width: 100%;
			text-align: center;
			font-size: 23rpx;
			font-family: 'ar';
			display: block;
		}
	}

	.itemBox {
		width: 600rpx;
		margin-top: 70rpx;

		.itemList {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 25rpx;

			.itemListName {
				font-size: 23rpx;
				font-family: 'ar';
				margin-left: 20rpx;
			}

			.dot1 {
				width: 10rpx;
				height: 10rpx;
				background-color: #f08329;
				border-radius: 50%;
				margin-left: 60rpx;
			}

			.dot2 {
				width: 10rpx;
				height: 10rpx;
				background-color: #d0e7f5;
				border-radius: 50%;
				margin-left: 60rpx;
			}

			.dot3 {
				width: 10rpx;
				height: 10rpx;
				background-color: #ffe8a2;
				border-radius: 50%;
				margin-left: 60rpx;
			}
		}

		.itemHead3 {
			background-color: #ffe8a2;
		}

		.itemHead2 {
			background-color: #d0e7f5;
		}

		.itemHead1 {
			background-color: #fce8d7;
		}

		.itemHead {
			width: 600rpx;
			height: 60rpx;
			border-radius: 15rpx;
			display: flex;
			padding: 0 35rpx 0 35rpx;
			margin-bottom: 35rpx;
			align-items: center;
			justify-content: space-between;

			.name {
				font-size: 25rpx;
				font-family: 'ab';
			}

			.arrow {
				width: 13rpx;
				height: 9rpx;
			}
		}
	}

	.line1 {
		width: 600rpx;
		height: 2rpx;
		background-color: #000;
		position: relative;
		margin-top: 60rpx;
		// margin-left: 35rpx;
	}

	.myTeamBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		padding: 50rpx 35rpx 50rpx 35rpx;
		background-color: #fff;
		overflow-y: scroll;
		border-radius: 15rpx;
		margin-bottom: 100rpx;

		.userBox {
			width: 600rpx;
			position: relative;

			// margin-left: 35rpx;
			.moneyInfo {
				font-size: 28rpx;
				font-family: 'ab';
				color: #f08329;
			}

			.levelInfo {
				font-size: 28rpx;
				font-family: 'ab';
			}

			.label {
				font-size: 25rpx;
				font-family: 'ar';
				margin-right: 25rpx;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
			}

			.levelBox {
				position: absolute;
				left: 160rpx;
				top: 23rpx;
			}

			.moneyBox {
				position: absolute;
				left: 160rpx;
				top: 70rpx;
			}
		}
	}

	.menuBox {
		width: 474rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 200rpx;
		align-items: center;
		margin-left: 138rpx;

		.line {
			width: 4rpx;
			height: 30rpx;
			background-color: #d7d6d5;
		}

		.menuItem {
			font-size: 27rpx;
			font-family: 'ab';
			height: 60rpx;
			line-height: 60rpx;
		}


	}

	.menuActive {
		color: #f08329;
		border-bottom: 5rpx solid #f08329;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
		background: url('https://cdn.zkjialan.com/user/channelBg.jpg');
		background-size: 100% 100%;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>